<template>
  <div class="image-selector">
    <div class="image-preview-list">
      <!-- 单选模式：只显示一张图片或占位符 -->
      <template v-if="!props.multiple">
        <div class="image-preview-item" @click="openSelector">
          <img
            v-if="imageUrls.length > 0 && imageUrls[0]"
            :src="getFullImageUrl(imageUrls[0])"
            class="preview-image"
          />
          <div v-else class="image-placeholder">
            <ElIcon><Plus /></ElIcon>
            <span>选择图片</span>
          </div>
        </div>
      </template>

      <!-- 多选模式：显示所有图片 -->
      <template v-else>
        <div v-for="(url, index) in imageUrls" :key="index" class="image-preview-item">
          <img v-if="url" :src="getFullImageUrl(url)" class="preview-image" />
          <div v-else class="image-placeholder">
            <span>无图片</span>
          </div>
          <ElIcon class="remove-icon" @click="removeImage(index)">
            <Close />
          </ElIcon>
        </div>

        <!-- 添加图片按钮 -->
        <div class="add-image-btn" @click="openSelector">
          <ElIcon><Plus /></ElIcon>
          <span>选择图片</span>
        </div>
      </template>
    </div>

    <!-- 使用 AvatarPickerDialog 组件 -->
    <AvatarPickerDialog
      v-model:visible="dialogVisible"
      :multiple="props.multiple"
      @select="handleImageSelect"
    />
  </div>
</template>

<script setup lang="ts">
  import { Plus, Close } from '@element-plus/icons-vue'
  import AvatarPickerDialog from '@/components/AvatarPickerDialog.vue'
  import { getFullImageUrl } from '@/utils/image'

  interface Props {
    modelValue?: string // 逗号分隔的图片URL字符串
    multiple?: boolean // 是否支持多选，默认true
  }

  interface Emits {
    (e: 'update:modelValue', value: string): void
  }

  const props = withDefaults(defineProps<Props>(), {
    modelValue: '',
    multiple: true
  })

  const emit = defineEmits<Emits>()

  // 弹窗显示状态
  const dialogVisible = ref(false)

  // 图片URL数组
  const imageUrls = computed(() => {
    if (!props.modelValue) return []
    return props.modelValue.split(',').filter((url) => url.trim())
  })

  /**
   * 打开图片选择器
   */
  const openSelector = () => {
    dialogVisible.value = true
  }

  /**
   * 移除图片
   * @param index 要移除的图片索引
   */
  const removeImage = (index: number) => {
    const urls = [...imageUrls.value]
    urls.splice(index, 1)
    emit('update:modelValue', urls.join(','))
  }

  /**
   * 处理图片选择
   * @param data 选中的图片数据
   * 单选模式: { fullUrl: string, url: string }
   * 多选模式: [{ fullUrl: string, url: string }, ...]
   */
  const handleImageSelect = (
    data: { fullUrl: string; url: string } | Array<{ fullUrl: string; url: string }>
  ) => {
    if (props.multiple) {
      // 多选模式：data 是数组
      if (Array.isArray(data)) {
        const newUrls = data.map((item) => item.fullUrl)
        const urls = [...imageUrls.value, ...newUrls]
        emit('update:modelValue', urls.join(','))
      }
    } else {
      // 单选模式：data 是对象
      if (!Array.isArray(data)) {
        emit('update:modelValue', data.fullUrl)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .image-selector {
    width: 100%;

    .image-preview-list {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;

      .image-preview-item {
        position: relative;
        width: 100px;
        height: 100px;
        overflow: hidden;
        border: 1px solid #dcdfe6;
        border-radius: 4px;

        .preview-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .image-placeholder {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          // padding: 8px;
          cursor: pointer;
          background-color: #f5f7fa;
          transition: background-color 0.3s;

          &:hover {
            background-color: #e8eaed;
          }

          .el-icon {
            margin-bottom: 4px;
            font-size: 24px;
            color: #8c939d;
          }

          span {
            font-size: 12px;
            color: #909399;
          }
        }

        .remove-icon {
          position: absolute;
          top: 4px;
          right: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 20px;
          height: 20px;
          font-size: 14px;
          color: #fff;
          cursor: pointer;
          background-color: rgb(0 0 0 / 50%);
          border-radius: 50%;
          transition: background-color 0.3s;

          &:hover {
            background-color: rgb(0 0 0 / 70%);
          }
        }
      }

      .add-image-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 100px;
        cursor: pointer;
        background-color: #fafafa;
        border: 1px dashed #dcdfe6;
        border-radius: 4px;
        transition: border-color 0.3s;

        &:hover {
          border-color: #409eff;

          .el-icon {
            color: #409eff;
          }

          span {
            color: #409eff;
          }
        }

        .el-icon {
          margin-bottom: 4px;
          font-size: 24px;
          color: #8c939d;
        }

        span {
          font-size: 12px;
          color: #8c939d;
        }
      }
    }
  }
</style>
